import { List, Provider, SwipeAction } from '@ant-design/react-native'
import React from 'react'
import { View, StyleSheet, Text, TouchableOpacity, Alert } from 'react-native'
import FontAwesome from '@expo/vector-icons/FontAwesome';

export default class Scene extends React.Component<any, any> {

    // 处理编辑按钮点击事件
    handleEdit = () => {
        const { onEdit, sceneName } = this.props;
        
        // 如果父组件传递了 onEdit 回调函数，就调用它
        if (onEdit) {
            onEdit();
        } else {
            console.log('编辑场景:', sceneName);
        }
    }
  priority: any;

    render() {
        // --- 步骤 1：从 this.props 中解构出 sceneName ---
        const { sceneName, onIncrease, onDecrease, onDelete, priority = 1 } = this.props;

        const right = [
            {
                text: '编辑',
                onPress: this.handleEdit, // 使用新的处理函数
                backgroundColor: 'orange',
                color: 'white',
            },
            {
                text: '删除',
                onPress: () => {
                    console.log('Delete pressed', sceneName);
                    if (onDelete) {
                        console.log('Delete pressed1', sceneName);
                        onDelete();
                    } else {
                        console.log('删除场景:', sceneName);
                    }
                },
                backgroundColor: 'red',
                color: 'white',
            },
        ]

        return (
            <Provider>
                <View style={styles.container}>
                    <SwipeAction
                        right={right}
                        closeOnAction
                        closeOnTouchOutside
                    >
                        <View style={styles.row}>
                            {/* --- 步骤 2：在这里使用 sceneName 变量 --- */}
                            <Text style={styles.leftText}>{sceneName}</Text>
                            
                            <View style={styles.priorityBox}>
                                <TouchableOpacity
                                    onPress={() => {
                                        // Alert.alert('增加优先级'); // 建议调试完成后移除
                                        onIncrease && onIncrease();
                                    }}
                                    style={styles.priorityBtn}
                                >
                                    <FontAwesome name="chevron-up" size={18} color="#3366cc" />
                                </TouchableOpacity>
                                {/* <Text style={styles.priorityText}>{priority}</Text> */}
                                <TouchableOpacity
                                    onPress={() => {
                                        // Alert.alert('减少优先级'); // 建议调试完成后移除
                                        onDecrease && onDecrease();
                                    }}
                                    style={styles.priorityBtn}
                                >
                                    <FontAwesome name="chevron-down" size={18} color="#3366cc" />
                                </TouchableOpacity>
                            </View>
                        </View>
                    </SwipeAction>
                </View>
            </Provider>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        width: 330,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 50,
        marginVertical: 8,
        overflow: 'hidden',
        backgroundColor: '#fff',
        alignSelf: 'center',
    },
    row: {
        height: 50,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 16,
        backgroundColor: '#fff', // 确保内容背景色
    },
    leftText: {
        fontSize: 16,
        color: '#000',
    },
    priorityBox: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    priorityBtn: {
        width: 28,
        height: 28,
        borderRadius: 14,
        backgroundColor: '#e6f0fa',
        alignItems: 'center',
        justifyContent: 'center',
        marginHorizontal: 4,
    },
    priorityBtnText: {
        fontSize: 18,
        color: '#3366cc',
        fontWeight: 'bold',
    },
});